<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
        <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/common1.js"></script>
<script type="text/javascript" src="js/jBox-master/Source/plugins/Notice/jBox.Notice.min.js"></script>
<link rel="stylesheet" href="js/jBox-master/Source/plugins/Notice/jBox.Notice.css">
<link rel="stylesheet" href="js/jBox-master/Source/themes/NoticeFancy.css">
<style type="text/css">
.file {
    position: relative;
    display: inline-block;
    background: #FFFFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}
</style>

<script type="text/javascript">
function preview(file){
    var prevDiv = document.getElementById('photo');
    if (file.files && file.files[0]){
      var reader = new FileReader();  //用来读取文件的模型
      reader.onload = function(evt){  //处理读取的文件
        prevDiv.innerHTML = '<img src="' + evt.target.result + '" style="width:120px;height:120px;" class="img-circle"/>';
      }
      reader.readAsDataURL(file.files[0]);//读取图像文件
    }else{
      prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
    }
  }
</script>

<title>Insert title here</title>
</head>
<body>
    <form class="form-horizontal" role="form" id="formdata">
      <div class="form-group ">
        <label class="col-sm-2 control-label">游戏类别：</label>
        <div class="col-xs-2">
            <select class="form-control" id="gameClass" onchange="getGame()">
              <option value="">请选择</option>
              
              <option v-for="gc in gclass" :value="gc.gcId">{{gc.gcName}}</option>
            </select>
         </div>
      </div>
      
      <div class="form-group ">
        <label class="col-sm-2 control-label">游戏名称：</label>
        <div class="col-xs-2">
            <select class="form-control" id="games" onchange="getGameZone()">
              <option value="">请选择</option>
              <div v-if="games!=''">
              <option v-for="game in games" :value="game.gameId">{{game.gameName}}</option>
              </div>
            </select>
         </div>
      </div>
      
      <div class="form-group">
        <label class="col-sm-2 control-label">游戏分区：</label>
        <div class="col-xs-2">
            <select class="form-control" id="gameZone" onchange="getGoodsClass()">
            <!-- 针对两种情况设计了两个请选择下拉框 -->
              <option value="无分区" v-if="gzone==''">请选择</option>
              <div v-if="gzone!=''and gzone!=null">
              <option value="" v-if="gzone!=''">请选择</option>
              <option v-for="gz in gzone" :value="gz.gzId">{{gz.gzName}}</option>
              </div>
            </select>								
         </div>
      </div>
     <div class="form-group" id="gclass">
        <label class="col-sm-2 control-label">商品类别：</label>
        <div class="col-xs-2">
            <select class="form-control" id="goodsClass">
              <option value="">请选择</option>
              <div v-if="gdClass!=''">
              <option v-for="gc in gdClass" :value="gc.gcId">{{gc.gcName}}</option>
              </div>
            </select>
         </div> 
      </div> 
      
      <div class="form-group" id="dgname">
        <label class="col-sm-2 control-label ">商品名称：  </label>
        <div class="col-xs-3">
            <input type="text" class="form-control"  placeholder="请输入商品名称" name="gname" id="gname">
         </div>
      </div>
      
      <div class="form-group">
        <label class="col-sm-2 control-label " >商品图片：  </label>
        <div class="col-xs-3">
            <div id="photo">
              
            </div>
            <div class="col-sm-10" style="margin-left:-5px;">
              <a href="javascript:;" class="file">选择文件
              <input type="file" id="inputFile" onchange="preview(this)" name="photo1">
              </a>
            </div>
        </div>
      </div>
      
      <div class="form-group" id="dgprice">
        <label class="col-sm-2 control-label ">商品价格：  </label>
        <div class="col-xs-3">
            <input type="text" class="form-control"  placeholder="请输入商品价格" name="gprice" id="gprice">
         </div>
      </div>
      
      <div class="form-group" id="dgsum">
        <label class="col-sm-2 control-label ">商品数量：  </label>
        <div class="col-xs-3">
            <input type="text" class="form-control"  placeholder="请输入商品数量" name="gsum" id="gsum">
         </div>
      </div>
      
      <div class="form-group">
        <label class="col-sm-2 control-label ">商品备注：  </label>
        <div class="col-xs-3">
            <input type="text" class="form-control"  placeholder="请输入商品备注" name="gdetail">
         </div>
      </div>
      <div style="margin-left:170px;">
      <button type="button" class="btn btn-primary" onclick="addGoods()" data-toggle="modal" data-target="#addResult">提交</button>
      </div>
   </form>
   
   <!-- 结果模态框 -->

<div class="modal fade" id="addResult" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">提示信息：</h4>
      </div>
      
      <div class="modal-body" v-if="bool">
                发布成功！
      </div>
      <div class="modal-body" v-else>
                 发布失败，请重试！
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript">
var gameClass=new Vue({
	el:'#gameClass',
	data:{
		gclass:'',
	}
});
var game=new Vue({
	el:'#games',
	data:{
		games:''
	}
});
var gameZone=new Vue({
	el:'#gameZone',
	data:{
		gzone:'',
	}
});


var goodsClass=new Vue({
	el:'#goodsClass',
	data:{
		gdClass:'',
	}
});
//声明一个游戏表_游戏分区表id变量
var game_gameZoneId='';

var resultBool=new Vue({
	el:'#addResult',
	data:{
		bool:false,
	}
});

//页面一加载就获取游戏分类
$(function(){
	$.ajax({
		url:'queryGameClass.do',
		type:'post',
		dataType:'json',
		success:function(result){
			gameClass.gclass=result;
		}
	});
});
//获取游戏表
function getGame(){
	var text=$("#gameClass").find("option:selected").text();//获取Select选择的Text 
	var gcId=$("#gameClass").val();//获取Select选择的Value 
	if(gcId==null || gcId==''){  //如果选择的是‘请选择’，则把data设为空字符串，并且结束方法，不执行ajax
		game.games='';
	    gameZone.gzone='';
	    goodsClass.gdClass='';
		return;
	}else{
		 $("#games").get(0).selectedIndex=0;//设置Select索引值为0的项选中
		 gameZone.gzone='';
		 goodsClass.gdClass='';
	}
	$.ajax({
		url:'queryGames.do',
		data:{gcId:gcId},
		type:'post',
		dataType:'json',
		success:function(result){
			console.log(result);
			game.games=result;
		}
		
	})
};
//获取游戏分区表
function getGameZone(){
	var gId=$("#games").val();  //获取Select选择的Value
	if(gId==null || gId==''){  //如果选择的是‘请选择’，则把data设为空字符串，并且结束方法，不执行ajax
		gameZone.gzone='';
	    goodsClass.gdClass='';
		return;
	}else{
		 $("#gameZone").get(0).selectedIndex=0;//设置Select索引值为0的项选中
		 goodsClass.gdClass='';
	}
	$.ajax({
		async:false,
		url:'queryGameZone.do',
		data:{gId:gId},
		type:'post',
		dataType:'json',
		success:function(result){
			console.log(result);
			gameZone.gzone=result;
			
			//如果值为空那么直接获取游戏表_游戏分区id和获取商品分类表
			if(result==null || result==''){
				$.ajax({
					async:false,         //加上此属性保证多个ajax同步按顺序执行，
					url:'queryGame_GameZone.do',
					data:{game_id:gId},
					type:'post',
					dataType:'json',
					success:function(result){
						game_gameZoneId=result;
					}
				});
				var ggzId=game_gameZoneId;
				$.ajax({
					async:false,
					url:'queryGoodsClass.do',
					data:{ggzId:ggzId},
					type:'post',
					dataType:'json',
					success:function(result){
						goodsClass.gdClass=result;
					}
				})
			}
		}
		
	});
};
//获取商品分类信息
  function getGoodsClass(){
	var gzId=$("#gameZone").val();  //获取Select选择的Value
	if(gzId==null || gzId==''){  //如果选择的是‘请选择’，则把data设为空字符串，并且结束方法，不执行ajax
		goodsClass.gdClass='';
		return;
	}else{
		 $("#goodsClass").get(0).selectedIndex=0;//设置Select索引值为0的项选中
	}
	//先获得游戏表_游戏分区id
	//var gzId=$("#gameZone").val();
	var gId=$("#games").val();
	$.ajax({
		async:false,
		url:'queryGame_GameZone.do',
		data:{game_id:gId,gzId:gzId},
		type:'post',
		dataType:'json',
		success:function(result){
			game_gameZoneId=result;
		}
	});
	var ggzId=game_gameZoneId;
	$.ajax({
		async:false,
		url:'queryGoodsClass.do',
		data:{ggzId:ggzId},
		type:'post',
		dataType:'json',
		success:function(result){
			goodsClass.gdClass=result;
		}
	})
}; 
//文件上传
function addGoods(){
	var gameClass=$("#gameClass").find("option:selected").text();
	var game=$("#games").find("option:selected").text();
	var gameZone=$("#gameZone").find("option:selected").text();
	var goodsClass=$("#goodsClass").find("option:selected").text();
	var gcId=$("#goodsClass").val();
	var gname=$("#gname").val();
	var gprice=$("#gprice").val();
	var gsum=$("#gsum").val();
	//判断必要元素是否为空
	if(gcId==null || gcId==''){
		$("#gclass").addClass("has-error");
		return;
	}else{
		$("#gclass").removeClass("has-error");
	}
	if(gname==null || gname==''){
		$("#dgname").addClass("has-error");
		return;
	}
	else{
		$("#dgname").removeClass("has-error");
	}
	if(gprice==null || gprice==''){
		$("#dgprice").addClass("has-error");
		return;
	}
	else{
		$("#dgprice").removeClass("has-error");
	}
	if(gsum==null || gsum==''){
		$("#dgsum").addClass("has-error");
		return;
	}
	else{
		$("#dgsum").removeClass("has-error");
	}
	
	var goodsAllClass=gameClass+"/"+game+"/"+gameZone+"/"+goodsClass;
	var form=new FormData(document.getElementById("formdata"));
	console.log(form);
	$.ajax({
		url:'addToGoods.do?goodsAllClass='+goodsAllClass+'&gc_id='+gcId+'&g_gz_id='+game_gameZoneId+'',
		data:form,
		type:'post',
		dataType:'json',
		processData:false,
        contentType:false,
		success:function(result){
			resultBool.bool=result;
		}
	})
}
</script>
</html>